<template>
  <view
    :style="{
				transform: 'translateY('+ pageDeviation +'px)',
				transition: pageTransition + 's',
			}"
    @touchstart="pageTouchstart"
    @touchmove="pageTouchmove"
    @touchend="pageTouchend"
  >
    <!-- 下拉刷新 -->
    <view class="q-loading-wrapper">
      <image v-show="refreshing"
             class="q-loading-icon"
             :class="{'q-refresh-active': refreshing, 'q-refresh-ready': refreshReady}"
             src="">
      </image>
    </view>
    <slot></slot>
  </view>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { socialSystemModule } from '@/socialuni/store'

@Component
export default class QPullRefresh extends Vue {
  @Prop({ default: 50 }) refreshNum: number
  //下偏移量
  pageDeviation = 0
  //回弹过渡时间
  pageTransition = 0
  //进入刷新准备状态
  refreshReady = false
  // 进入刷新状态
  refreshing = false

  startY = 0
  moveY = 0
  timeDiff = 0
  touchending = false


  pageTouchstart (e) {
    this.touchending = false
    this.pageTransition = 0
    this.startY = e.touches[0].pageY
  }

  // pageTouchmove = CommonUtil.throttle(this.pageTouchMoveHandle, 1)

  pageTouchmove (e) {
    if (this.touchending) {
      return
    }
    this.moveY = (e.touches[0].pageY - this.startY) * 0.4
    if (this.moveY >= 0) {
      this.pageDeviation = this.moveY
    }
    if (this.moveY >= this.refreshNum && this.refreshReady === false) {
      this.refreshReady = true
    } else if (this.moveY < this.refreshNum && this.refreshReady === true) {
      this.refreshReady = false
    }
    if (socialSystemModule.isIos && e.touches[0].pageY > socialSystemModule.windowHeight + 10) {
      this.pageTouchend()
    }
  }

  pageTouchend () {
    this.touchending = true
    if (this.moveY === 0) {
      return
    }
    this.pageTransition = 0.3
    if (this.moveY >= this.refreshNum) {
      this.startPulldownRefresh()
    } else {
      this.pageDeviation = 0
    }

    if (this.refreshReady === true) {
      this.refreshReady = false
    }
    this.startY = this.moveY = 0
  }

  //开启下拉刷新
  startPulldownRefresh () {
    if (+new Date() - this.timeDiff < 100) {
      return
    }
    this.timeDiff = +new Date()
    this.refreshing = true
    this.pageDeviation = 45
    this.refresh()
  }

  @Emit()
  refresh () {
    return null
  }

  //结束下拉刷新
  endPulldownRefresh () {
    this.refreshing = false
    this.pageDeviation = 0
    //this.$emit('setEnableScroll', true);
  }
}
</script>

<style>
/* 下拉刷新部分 */
.q-loading-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.q-loading-icon {
  width: 35px;
  height: 35px;
  transition: .3s;
}

.q-loading-icon.q-refresh-ready {
  transform: scaleX(1.3);
}

.q-loading-icon.q-refresh-active {
  animation: loading .5s ease-in infinite both alternate;
}

@keyframes loading {
  0% {
    transform: translateY(-10px) scaleX(1);
  }
  100% {
    transform: translateY(2px) scaleX(1.3);
  }
}
</style>
